<template>
  <!--基础管理-车辆管理-->
  <div>
    <!--查询-->
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="厂牌型号">
        <el-input v-model="search.c_brand" placeholder="厂牌型号"></el-input>
      </el-form-item>

      <el-form-item label="车牌号">
        <el-input v-model="search.c_plate" placeholder="车牌号"></el-input>
      </el-form-item>

      <el-form-item label="司机姓名">
        <el-input
          v-model="search.c_drivername"
          placeholder="司机姓名"
        ></el-input>
      </el-form-item>

      <el-form-item label="所属公司">
        <el-input v-model="search.c_company" placeholder="所属公司"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="page1SearchPageList">查询</el-button>
      </el-form-item>
      <el-button type="success" @click="cheAdd()">新增</el-button>
      <el-button type="success" @click="piShan()">批删</el-button>
    </el-form>
    <!--显示-->
    <el-table ref="chedelete" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="型号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_brand }}</span>
        </template>
      </el-table-column>

      <el-table-column label="车牌号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_plate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="司机姓名" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_drivername }}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属公司" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_company }}</span>
        </template>
      </el-table-column>

      <el-table-column label="车型（长宽高" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.c_long + "*" + scope.row.c_width + "*" + scope.row.c_high
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="颜色" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_colour }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_bydate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="营运证号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_operation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="保险到期时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.c_insurancedateend
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年检到期时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_checkdateend }}</span>
        </template>
      </el-table-column>
      <el-table-column label="保养公里设置" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.c_maintain }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="searchPageList"
    />
    <!--添加弹出框-->
    <el-dialog title="提示" :visible.sync="AddShow" width="50%">
      <el-form ref="form" :model="cheaddList" label-width="80px">
        <el-row>
          <el-col :span="8" >
            
            <el-form-item label="厂牌型号">
              <el-input
                v-model="cheaddList.c_brand"
                placeholder="请输入厂牌型号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号">
              <el-input
                v-model="cheaddList.c_plate"
                placeholder="请输入车牌号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
           
        <el-row>
          <el-col :span="8">
               <el-form-item label="所属公司">
              <el-input
                v-model="cheaddList.c_company"
                placeholder="请输入所属公司"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="司机姓名">
              <el-input
                v-model="cheaddList.c_drivername"
                placeholder="请输入司机姓名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
         <el-row>
          <el-col :span="8">
               <el-form-item label="车型">

              <el-input
                v-model="cheaddList.c_long"
                placeholder="长"
                type="Number"
                
              ></el-input>

              <el-input
                v-model="cheaddList.c_width"
                placeholder="宽"
                type="Number"
              ></el-input>

              <el-input
                v-model="cheaddList.c_high"
                placeholder="高"
                type="Number"
              ></el-input>
              
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="车辆颜色">
              <el-input
                v-model="cheaddList.c_colour"
                placeholder="请输入车辆颜色"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

          <el-row>
          <el-col :span="8">
               <el-form-item label="购置日期">
              <el-input
              type="date"
                v-model="cheaddList.c_bydate"
                placeholder="请输入购置日期"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="营运证好">
              <el-input
                v-model="cheaddList.c_operation"
                placeholder="请输入营运证好"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

         <el-row>
          <el-col :span="8">
               <el-form-item label="保险到期日期">
              <el-input
              type="date"
                v-model="cheaddList.c_insurancedateend"
                placeholder="请输入保险到期时间"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="年间到期日期">
              <el-input
              type="date"
                v-model="cheaddList.c_checkdateend"
                placeholder="请输入年间到期日期"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span=8>
             <el-form-item label="保养公里数设置">
              <el-input
                v-model="cheaddList.c_maintain"
                placeholder="请输入保养公里数设置"
                type="Number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="12">
            <el-form-item label="车辆照片">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                multiple
                :on-success="handleAvatarSuccess2"
                name="fileList"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>

                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不能查过500k
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

         <el-row>
          <el-col :span="12">
            <el-form-item label="保险照片">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                multiple
                :on-success="handleAvatarSuccess3"
                name="fileList"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>

                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不能查过500k
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="cheAddyes()">添加</el-button>
          <el-button @click="cheQu()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  Pages, //显示
  shan, //单删
  pidelete, //批删
  cheadds,//添加
} from "@/api/system_base/CheliangApi"; // 引入车辆类别操作api
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
       uploadUrl:
        process.env.VUE_APP_BASE_API +
        "services/app/FileManagerService/FilesUpload",
      imageUrl: "",
      addtuname: "",
      addtuname2:"",
      total:0,
      AddShow: false,
      tableData: [],
      search: {
        page: 1, //当前页
        maxResultCount: 2, //每页多少条
        skipCount: 0, //当前页第一条记录位置  用于abp接口
        c_brand: "",
        c_plate: "",
        c_drivername: "",
        c_company: "",
      },
      cheaddList: {
        c_brand: "",
        c_plate: "",
        c_drivername: "",
        c_company: "",
        c_long: "",
        c_width: "",
        c_high: "",
        c_colour: "",
        c_bydate: "",
        c_operation: "",
        c_insurancedateend: "",
        c_checkdateend: "",
        c_maintain: "",
        c_chezhaotu:"",
        c_baoxiantu:"",
      },
    };
  },
  created() {
    // this.Page();
    this.searchPageList();
  },
  methods: {
     //文件上传
    handleAvatarSuccess2(res, files, fileList) {
      // res.imagerUrl="https://localhost:44311/"+
      res.result.some((f, i) => {
        var that = this;
        that.addtuname="",
        that.addtuname = f.fileNewName;
        this.imagerUrl = "https://localhost:44311/" + f.fileNewName;
      });
    },
    handleAvatarSuccess3(res, files, fileList) {
      // res.imagerUrl="https://localhost:44311/"+
      res.result.some((f, i) => {
        var that = this;
        that.addtuname="",
        that.addtuname2 = f.fileNewName;
        this.imagerUrl = "https://localhost:44311/" + f.fileNewName;
      });
    },

    cheAdd() {
      this.AddShow = true;
    },
    //批删
    piShan() {
      var arrid = [];
      var id = this.$refs.chedelete.selection; //获取所有选中数据
      id.forEach((r) => {
        arrid.push(r.id); //循环取出选中数据id
      });
      if (arrid.length == 0) {
        this.$message("最少选择一个");
        return;
      }
      if (confirm("确认要删除吗")) {
        arrid.forEach(
          //循环所有选中的id
          (r) => {
            var dd = r;
            pidelete(dd).then(
              //依次执行单删方法实现批删效果
              (r) => {
                this.page1SearchPageList();
              }
            );
            this.$message("批删成功");
          }
        );
      }
    },
     //车辆添加
     cheAddyes(){
        this.cheaddList.c_chezhaotu=this.addtuname;
        this.cheaddList.c_baoxiantu=this.addtuname2;
       if(this.cheaddList.c_brand=="") 
       {
         this.$message("厂牌型号不能为空");
         return;
       }
        if(this.cheaddList.c_plate=="") 
       {
         this.$message("车牌号不能为空");
         return;
       }
        if(this.cheaddList.c_drivername=="") 
       {
         this.$message("司机姓名不能为空");
         return;
       }
        if(this.cheaddList.c_company=="") 
       {
         this.$message("公司不能为空");
         return;
       }
        if(this.cheaddList.c_long<=0) 
       {
         this.$message("车辆长度不正确或者不能为空");
         return;
       }
        if(this.cheaddList.c_width<=0) 
       {
         this.$message("车辆宽度不正确或者不能为空");
         return;
       }
        if(this.cheaddList.c_high<=0) 
       {
         this.$message("车辆高度不正确或者不能为空");
         return;
       }
        if(this.cheaddList.c_colour=="") 
       {
         this.$message("颜色不能空");
         return;
       }
        if(this.cheaddList.c_bydate=="") 
       {
         this.$message("购买日期不能空");
         return;
       }
        if(this.cheaddList.c_operation=="") 
       {
         this.$message("营运证号不能空");
         return;
       }
        if(this.cheaddList.c_insurancedateend=="") 
       {
         this.$message("保险到期时间不能空");
         return;
       }
        if(this.cheaddList.c_checkdateend=="") 
       {
         this.$message("年检到期时间不能空");
         return;
       }
        if(this.cheaddList.c_maintain<=0) 
       {
         this.$message("保养公里设置不能为空");
         return;
       }
         if(this.cheaddList.c_chezhaotu=="") 
       {
         this.$message("车辆照片不能为空");
         return;
       }
         if(this.cheaddList.c_baoxiantu=="") 
       {
         this.$message("保险照片不能为空");
         return;
       }
       
       cheadds(this.cheaddList).then(
         (r)=>{
           this.$message("添加成功");
           this.AddShow=false;
           this.searchPageList();
         }
       )
     },
     //车辆添加取消
     cheQu(){
       this.AddShow=false;
     },
     // 搜索方法
    searchPageList() {
     

      
      this.listLoading = true; // 显示加载效果

      this.search.skipCount =
        (this.search.page - 1) * this.search.maxResultCount;
      Pages(this.search).then((response) => {
        // 调用分页接口
        this.tableData = response.result.items; // 将查询结果赋值给list
        this.listLoading = false; // 隐藏加载效果
        this.total = response.result.totalCount; // 赋值总行数
      });
    },
    page1SearchPageList() {
      // 点击搜索
      // 搜索方法
      this.search.page = 1; // 将当前页设置为第一页
      this.searchPageList(); // 调用搜索分页方法
    },
    //编辑
    handleEdit(id) {
      this.$router.push("/chebianji/"+id);
    },
    //删除
    handleDelete(id) {
     if(confirm("确认删除吗"))
     {
        shan(id).then((r) => {
        this.$message("删除成功");
        this.page1SearchPageList();
      });
     }
    },
  },
};
</script>